<template>
	<div class="speak-texarea-wrapper">
		<!-- 实时拟合模式下 模板 -->
		<el-form-item :label="label" v-if="videoType === 'real-time-fitting' || videoType === 'no-video' || videoType === 'video-switching'" :required="required" :prop="prop">
			<!-- <el-input
				:value="value"
				:placeholder="placeholder"
				:disabled="showDetail"
				maxlength="500"
				type="textarea"
				:autosize="{ minRows: 1, maxRows: 3 }"
				@input="updateValue"
				@change="onChange(prop)"
				:id="prop"
			></el-input> -->
			<ZcoTextarea
					:value="value"
					:placeholder="placeholder"
					:disabled="showDetail"
					:maxlength="500"
					type="textarea"
					:autosize="{ minRows: 1.1, maxRows: 3 }"
					@input="updateValue"
					@change="onChange(prop)"
					:id="prop"
				></ZcoTextarea>
			<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
		</el-form-item>
		<!-- 预录制模式 视频原声模板 -->
		<el-form-item :label="label" v-if="videoType === 'pre-recorded-video' && audioType === 'video-native'" :required="required" :prop="isNumber(prop) ? prop : required ? prop + 'Video' : ''">
			<el-input :value="value" :disabled="showDetail" :placeholder="placeholder" :maxlength="maxlength" @input="updateValue" @change="onChange" :id="prop" v-if="!showVideoIcon"> </el-input>
			<template v-if="video">
				<div class="native-video">
					<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
						<span v-if="video.fileName.length > 30">{{ video.fileName | flieOmit(30, -1) }}</span>
						<span v-else>{{ video.fileName }}</span>
						<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
					</el-button>
					<span class="close" @click="clearVideo">x</span>
				</div>
			</template>
			<!-- && !video.fileName -->
			<template v-if="showVideoIcon && !video">
				<div class="ai-video" @click="showVideoTable(value)">
					<img :src="videoIcon" alt="" srcset="" />
				</div>
			</template>
		</el-form-item>
		<!-- 预录制模式 TTS模板 -->
		<el-form-item :label="label" v-if="videoType === 'pre-recorded-video' && audioType === 'tts'" :required="required" :prop="prop" :error="error">
			<!-- <el-input
				:value="value"
				:placeholder="placeholder"
				:disabled="showDetail"
				maxlength="500"
				type="textarea"
				style="height: 32px"
				:autosize="{ minRows: 1, maxRows: 3 }"
				@input="updateValue"
				@change="onChange(prop)"
				:id="prop"
			></el-input> -->
			<ZcoTextarea
				:value="value"
				:placeholder="placeholder"
				:disabled="showDetail"
				:maxlength="500"
				type="textarea"
				:autosize="{ minRows: 1.1, maxRows: 3 }"
				@input="updateValue"
				@change="onChange(prop)"
				:id="prop"
			></ZcoTextarea>
			<template v-if="video && video.fileName">
				<div class="tts-video">
					<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
						<span v-if="video.fileName.length > 6">{{ video.fileName | flieOmit(6, -1) }}</span>
						<span v-else>{{ video.fileName }}</span>
						<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
					</el-button>
					<span class="close" @click="clearVideo">x</span>
				</div>
			</template>
			<template v-if="showVideoIcon && !video">
				<div class="ai-video" @click="showVideoTable">
					<img :src="videoIcon" alt="" srcset="" />
				</div>
			</template>
			<el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable" v-if="!showDetail && variableIcon"></el-button>
		</el-form-item>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow';
import ZcoTextarea from '../components/TinymceTextarea.vue';
export default {
	components: {
		ZcoTextarea
	},
	props: {
		label: {
			type: String,
			default: () => 'AI播报话术'
		},
		placeholder: {
			type: String,
			default: () => '请编辑AI客服播报的话术'
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		prop: {
			type: String,
			required: true,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		videoIcon: {
			type: String,
			required: true,
			default: () => ''
		},
		video: {
			type: Object,
			default: () => {}
		},
		variableIcon: {
			type: String,
			required: true,
			default: () => ''
		},
		required: {
			type: Boolean,
			default: () => false
		},
		error: {
			type: String,
			required: false,
			default: () => ''
		}
	},
	computed: {
		showVideoIcon() {
			return !AIWorkflow.getNumberTypeProperty(this.prop);
		},
		isNumber() {
			return prop => {
				return AIWorkflow.getNumberTypeProperty(prop);
			};
		}
	},
	mounted() {
		const { videoType, audioType } = AIWorkflow.getRobotProperty();
		this.videoType = videoType;
		this.audioType = audioType;
	},
	data() {
		return {
			videoType: '',
			audioType: ''
		};
	},

	methods: {
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		},
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		onChange() {
			this.$emit('onChange', this.prop);
		},
		showVideoTable() {
			this.$emit('showVideoTable', this.prop);
		},
		clearVideo() {
			this.$emit('clearVideo', this.prop);
		}
	}
};
</script>
<style lang="less" scoped>
.el-textarea {
	width: calc(100% - 54px);
}
.el-form-item {
	position: relative;
}
.add-icon {
	padding: 0 10px;
}
.native-video {
	width: calc(100% - 54px);
	position: relative;
}
.close {
	width: 50px;
	text-align: center;
	font-size: 18px;
	position: absolute;
	right: 0px;
	top: 0;
	cursor: pointer;
	color: #999;
}
.choose-btn {
	width: 100%;
	padding: 10px;

	/* line-height: 26px; */
	display: flex;
	align-items: center;
}

.choose-btn:hover .tips {
	display: inline-block;
}
</style>
